<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1024"
    @ok="handleSubmit">
    <BasicForm @register="registerForm" ref="formRef">
      <template #productNameSlot="{ model, field }">
        <a-input-search v-model:value="model[field]" placeholder="请选择产品编码" @search="timeOpen" />
      </template>
    </BasicForm>

    <!-- 子表单区域 -->
    <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
      <a-tab-pane tab="生产跟踪-生产状况" key="psProductionTrackingEstate" :forceRender="true">
        <JVxeTable keep-source resizable ref="psProductionTrackingEstate"
          :loading="psProductionTrackingEstateTable.loading"
          :columns="psProductionTrackingEstateTable.columns"
          :dataSource="psProductionTrackingEstateTable.dataSource" :height="340" :rowNumber="true"
          :rowSelection="true" :disabled="formDisabled" :toolbar="true" />
      </a-tab-pane>
      <a-tab-pane tab="生产跟踪-采购状况" key="psProductionTrackingPurchasingStatus" :forceRender="true">
        <JVxeTable keep-source resizable ref="psProductionTrackingPurchasingStatus"
          :loading="psProductionTrackingPurchasingStatusTable.loading"
          :columns="psProductionTrackingPurchasingStatusTable.columns"
          :dataSource="psProductionTrackingPurchasingStatusTable.dataSource" :height="340"
          :rowNumber="true" :rowSelection="true" :disabled="formDisabled" :toolbar="true" />
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
  <!-- 料品 -->
  <materialSelectModel @register="materialRegModal" @getSelectResult="materialhandleSuccess"
    v-bind="getBindValue"></materialSelectModel>

</template>

<script lang="ts" setup>
  import {
    ref,
    computed,
    unref,
    reactive
  } from 'vue';
  import {
    BasicModal,
    useModalInner,
    useModal
  } from '/@/components/Modal';
  import {
    BasicForm,
    useForm
  } from '/@/components/Form/index';
  import {
    JVxeTable
  } from '/@/components/jeecg/JVxeTable'
  import {
    useJvxeMethod
  } from '/@/hooks/system/useJvxeMethods.ts'
  import {
    formSchema,
    psProductionTrackingEstateColumns,
    psProductionTrackingPurchasingStatusColumns
  } from '../PsProductionTracking.data';
  import {
    saveOrUpdate,
    psProductionTrackingEstateList,
    psProductionTrackingPurchasingStatusList
  } from '../PsProductionTracking.api';
  import {
    VALIDATE_FAILED
  } from '/@/utils/common/vxeUtils';
  import materialSelectModel from '/@/views/components/materialSelectModel.vue';
  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);
  const formDisabled = ref(false);
  const refKeys = ref(['psProductionTrackingEstate', 'psProductionTrackingPurchasingStatus', ]);
  const activeKey = ref('psProductionTrackingEstate');
  const psProductionTrackingEstate = ref();
  const psProductionTrackingPurchasingStatus = ref();
  const tableRefs = {
    psProductionTrackingEstate,
    psProductionTrackingPurchasingStatus,
  };
  const psProductionTrackingEstateTable = reactive({
    loading: false,
    dataSource: [],
    columns: psProductionTrackingEstateColumns
  });
  const psProductionTrackingPurchasingStatusTable = reactive({
    loading: false,
    dataSource: [],
    columns: psProductionTrackingPurchasingStatusColumns
  });
  //表单配置
  const [registerForm, {
    setProps,
    resetFields,
    setFieldsValue,
    validate
  }] = useForm({
    labelWidth: 120,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: {
      span: 8
    },
  });
  //表单赋值
  const [registerModal, {
    setModalProps,
    closeModal
  }] = useModalInner(async (data) => {
    //重置表单
    await reset();
    setModalProps({
      confirmLoading: false,
      showCancelBtn: data?.showFooter,
      showOkBtn: data?.showFooter
    });
    isUpdate.value = !!data?.isUpdate;
    formDisabled.value = !data?.showFooter;
    if (unref(isUpdate)) {
      //表单赋值
      await setFieldsValue({
        ...data.record,
      });
      requestSubTableData(busSupplyDemandBalanceItemList, {
        id: data?.record?.id
      }, psProductionTrackingEstateTable);
    }
    // 隐藏底部时禁用整个表单
    setProps({
      disabled: !data?.showFooter
    });
  });
  //方法配置
  const [handleChangeTabs, handleSubmit, requestSubTableData, formRef] = useJvxeMethod(
    requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys);

  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

  async function reset() {
    await resetFields();
    activeKey.value = 'psProductionTrackingEstate';
    psProductionTrackingEstateTable.dataSource = [];
    psProductionTrackingPurchasingStatusTable.dataSource = [];
  }

  function classifyIntoFormData(allValues) {
    let main = Object.assign({}, allValues.formValue)
    return {
      ...main, // 展开
      psProductionTrackingEstateList: allValues.tablesValue[0].tableData,
      psProductionTrackingPurchasingStatusList: allValues.tablesValue[1].tableData,
    }
  }

  const [materialRegModal, {
    openModal: openMaterialModal
  }] = useModal();

  const getBindValue = Object.assign({}, '');
  //时隔
  function timeOpen() {
    openMaterialModal(true, {
      isUpdate: false,
      showFooter: true,
    });
  }

  //料品回写
  function materialhandleSuccess(val, values) {
    setFieldsValue({
      timeIntervalName: val[0].label,
      timeIntervalId: val[0].value,
      productCode : val[0].item.code,
      productId :  val[0].item.value,
      productName : val[0].item.name,
      productStandard: val[0].item.spec
    });
  }

  //表单提交事件
  async function requestAddOrEdit(values) {
    try {
      setModalProps({
        confirmLoading: true
      });
      //提交表单
      await saveOrUpdate(values, isUpdate.value);
      //关闭弹窗
      closeModal();
      //刷新列表
      emit('success');
    } finally {
      setModalProps({
        confirmLoading: false
      });
    }
  }

</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%
  }

  :deep(.ant-calendar-picker) {
    width: 100%
  }

</style>
